<template>
  <div class="recharge">
    <van-nav-bar title="充值" :left-arrow="true" @click-left="onClickLeft" />
    <div class="header">
      <div class="amount">充值金额</div>
      <div class="num">
        <span>¥</span>
        <van-field v-model="num" name="用户名" label placeholder="最少充值1元" />
      </div>
      <p class="balance">可用余额：¥6.00</p>
    </div>
    <div class="mode">
      <div class="amount">选择充值方式</div>
      <van-radio-group v-model="radio">
        <div class="list">
          <van-radio name="3" checked-color="#07c160" />
          <div class="list_r">
            <img src="@/assets/images/membercenter/yinlian.png" style="height:24px;" />
            <div class="main">
              <p>银联汇款</p>
              <span>单笔3000以上2%返利优惠</span>
            </div>
          </div>
        </div>
        <div class="list">
          <van-radio name="1" checked-color="#07c160" />
          <div class="list_r">
            <img src="@/assets/images/membercenter/weixin.png" />
            <div class="main">
              <p>银联汇款</p>
              <span>单笔3000以上2%返利优惠</span>
            </div>
          </div>
        </div>
        <div class="list">
          <van-radio name="2" checked-color="#07c160" />
          <div class="list_r">
            <img src="@/assets/images/membercenter/zhifubao.png" />
            <div class="main">
              <p>银联汇款</p>
              <span>单笔3000以上2%返利优惠</span>
            </div>
          </div>
        </div>
      </van-radio-group>
    </div>
    <div style="height:45px;"></div>
    <van-button type="primary" class="btnclass">立即充值</van-button>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "recharge",
  components: {},
  computed: {},
  data() {
    return {
      show: false,
      num: null,
      radio: null,
    };
  },

  mounted() {},
  created() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
    detailbtn() {
      this.$router.push({
        path: "/investmentprojectsDetails",
        query: {},
      });
    },
  },
};
</script>

<style scoped lang="less">
.recharge {
  width: 100%;
  height: 100%;
  background: #f7f8f9;
  text-align: center;
  .header {
    padding: 15px;
    background: #ffffff;

    .num {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e3e4e5;
      span {
        font-size: 29px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
      }
      .van-cell {
        line-height: 30px;
        font-size: 28px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
      }
    }
    .balance {
      font-size: 13px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
      padding: 13px 0 0 0;
    }
  }
  .amount {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #333333;
  }
  .mode {
    padding: 15px;
    background: #ffffff;
    margin-top: 8px;
    .list {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      padding: 25px 0;
      .list_r {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-left: 13px;
        img {
          width: 30px;
          height: 32px;
          margin-right: 13px;
        }
        .main {
          p {
            font-size: 15px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #333333;
            margin-bottom: 3px;
          }
          span {
            font-size: 13px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #999999;
          }
        }
      }
    }
  }
  .btnclass {
    opacity: 0.5;
    background: linear-gradient(90deg, #caa262, #e2c397);
    border-radius: 5px;
    border: none;
    width: 90%;
    margin: 0 auto;
    font-size: 17px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    color: #7d5319;
  }
  .show {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -moz-transform: rotate(180deg); /* Firefox */
    -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
    -o-transform: rotate(180deg);
  }
}
</style>